<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        * {
            box-sizing: border-box;
        }

        #main {
            height: 420px;
            width: 360px;
            border: 10px #000 solid;
            background-color: #b7d4a8;
            border-radius: 20px;
            margin: 50px auto;
        }

        #stage {
            width: 304px;
            height: 304px;
            border: 2px #000 solid;
            margin: 20px auto;
            position: relative;
        }

        #snake>div {
            width: 10px;
            height: 10px;
            background-color: #000;
            position: absolute;
        }

        #food {
            width: 10px;
            height: 10px;
            position: absolute;
            top: 100px;
            left: 100px;
            display: flex;
            flex-flow: row wrap;
        }

        #food>div {
            width: 5px;
            height: 5px;
            background-color: #000;
            transform: rotate(45deg);
        }

        #info {
            width: 304px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            font: bold 20px courier;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {

            // 获取蛇
            const snake = document.getElementById("snake")

            // 获取蛇的各个部分
            const snakes = snake.getElementsByTagName("div")

            // 获取蛇头
            const snakesHead = snakes[0]

            // 获取食物
            const food = document.getElementById("food")

            // 食物的宽度范围在[0-290],这里一定要是[0-29]*10的数

            function changeFood() {
                const x = Math.floor(Math.random() * 30) * 10;
                const y = Math.floor(Math.random() * 30) * 10;

                // 设置食物的坐标
                food.style.left = x + "px"
                food.style.top = y + "px"

            }

            changeFood()

            // 定义一个变量用来存储蛇移动的方向

            let dir
            const keyArr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight",
                "w", "a", "s", "d",
                "W", "A", "S", "D"]

            document.addEventListener("keydown", (event) => {
                if (keyArr.includes(event.key)) {
                    // 设置方向
                    dir = event.key
                }

            })

            setTimeout(function move() {
                switch (dir) {
                    case "ArrowUp":
                    case "w":
                    case "W":
                        // 向上移动蛇
                        snakesHead.style.top = snakesHead.offsetTop - 10 + "px"
                        break;

                    case "ArrowDown":
                    case "s":
                    case "S":
                        // 向下移动蛇
                        snakesHead.style.top = snakesHead.offsetTop + 10 + "px"
                        break;

                    case "ArrowLeft":
                    case "a":
                    case "A":
                        // 向左移动蛇
                        snakesHead.style.left = snakesHead.offsetLeft - 10 + "px"
                        break;

                    case "ArrowRight":
                    case "d":
                    case "D":
                        // 向右移动蛇
                        snakesHead.style.left = snakesHead.offsetLeft + 10 + "px"
                        break;
                }

                // 检查蛇是否吃到食物
                if (snakesHead.offsetTop === food.offsetTop && snakesHead.offsetLeft === food.offsetLeft) {
                    changeFood()
                    snake.insertAdjacentElement("beforeend",snakes[0].cloneNode(true))
                    console.log(snakes,snakes.length)
                    // 吃到食物之后1.改变食物的位置，2.增加蛇的身体
                    // 食物的宽度范围在[0-290]
                }

                setTimeout(move, 200)
            }, 200)
        })

    </script>
</head>

<body>
    <div id="main">
        <div id="stage">
            <div id="snake">
                <div></div>
            </div>
            <div id="food">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div id="info">
            <div>
                SCORE: <span id="score">100</span>
            </div>
            <div>
                LEVEl: <span id="level">1</span>
            </div>
        </div>
    </div>
</body>

</html>